<template>
	<div class="home">
		<!--表单处理 双向绑定-->
		<div v-for="(item, i) in items" :key="item.id" vclass>
			<span>{{ item.label }}</span>
			<span @click.stop="reduce(i)">-</span>
			<input v-model="item.num" />
			<span @click.stop="add(i)">+</span>
			<span @click.stop="del(item)">删除</span>
		</div>
		{{fullName}}
		<!-- <p @click="root">{{ counts }}</p> -->
		<p><input type="text" v-model="counts"></p>
		<div @click.once="onceClick">只能点一次</div>
		<childHomeposts :wrd.sync="show">
			顶顶顶
			<template slot="girl">
				<span>几点睡的</span>
			</template>
			<template v-slot="props">
				<!-- <li v-for="value in props.data">{{value}}</li> -->
				<li>{{props.value}}</li>
			</template>
		</childHomeposts>
		<div v-for="(item, index) in items_list" :key="item[index]">
			{{ item.id }}
			<div v-for="(items, indexs) in item.ids" :key="items">
				{{ items }}
			</div>
		</div>
		<div v-on:scroll.passive="onScroll($event)" style="height: 500px;overflow: scroll;">
			<ul class="matchList">
				<li v-for="(val, index) in list" :key="index">
					{{val.color}}
					<div class="status" :class="{ og: val.status == 2 || val.status == 3, os: val.status == 4, od: val.status == 5 }">
						<span v-if="val.status == 2">未开始</span>
						<span v-if="val.status == 3">未开始</span>
						<span v-if="val.status == 4">进行中</span>
						<span v-if="val.status == 5">已结束</span>
					</div>
					<p class="name">{{ val.name }}</p>
					<div class="justify">
						<div class="left">
							<p class="host">主办方：{{ val.host }}{{val.color}}</p>
							<p class="adress">地址：{{ val.address }}</p>
							<p class="date">
								开始时间：
								<span v-if="val.start_time != null">{{ String(val.start_time).slice(0, -3) }}</span>
							</p>
						</div>
						<div class="right">
							<div class="greenbtn" v-if="val.status == 2">报名</div>
							<div class="greenbtn" v-if="val.status == 3">报名</div>
							<div class="greenbtn" v-if="val.status == 4">查看</div>
							<div class="greenbtn" v-if="val.status == 5">查看</div>
							<div class="border-green-btn"><a target="_blank" :href="val.rule">竞赛规程</a></div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import {
		fetchList
	} from '@/api/match_list'
	import {
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import childHomeposts from './childHomeposts'
	export default {
		components: {
			childHomeposts
		},
		computed: {
			// ...mapState({
			// 	items: state => state.user.items
			// }),
			// ...mapState({
			// 	counts: state => state.user.counts
			// }),
			...mapGetters(['items']),
			...mapGetters(['counts']),
			fullName: {
				// getter
				get: function() {
					console.log(1);
					return this.firstName + ' ' + this.lastName
				},
				// setter
				set: function(newValue) {
					console.log(newValue);
					var names = newValue.split(' ')
					this.firstName = names[0]
					this.lastName = names[names.length - 1]
				}
			}
		},
		data() {
			return {
				show: true,
				offset: 1,
				list: [],
				noDate: false,
				firstName: '',
				lastName: '',
				items_list: [{
						"id": "1"
					},
					{
						"id": "2"
					}, {
						"ids": ["xc", "dfg"]
					}, {
						"id": "4"
					}
				]
			};
		},
		created() {
			this.getList();
			this.getData()
		},
		methods: {
			onScroll(e) {
				let scrollTop = e.target.scrollTop,
					scrollHeight = e.target.scrollHeight,
					clientHeight = e.target.clientHeight
				if (scrollTop === 0) {
					this.refresh()
				} else if (scrollHeight - scrollTop === clientHeight) {
					this.onLoad()
				}
			},
			refresh() {
				console.log('refresh');
			},
			onLoad() {
				this.getData()
			},
			getData() {
				this.fullName = 'John Doe'
				this.offset++
				fetchList(this.offset).then(res => {
					for (let i = 0; i < res.data.list.length; i++) {
						res.data.list[i].color = 1
					}
					this.list = res.data.list;
					if (res.data.length < 10) {
						this.noDate = true;
					}
				});
			},
			getList() {
				this.$store.dispatch('user/getList', {
					amount: 10
				});
			},
			onceClick() {
				console.log(1);
			},
			titleF(e) {
				console.log(e);
			},
			// ...mapActions('user', ['getList']),
			...mapActions('user', ['reduce', 'add', 'del', 'root'])
		}
	};
</script>
